@charset "utf-8";
/* CSS Document */

*{
    margin: 0;
    padding: 0;
}
ul,li,ol{
    list-style: none;
}
 
body{
    background:#000  url("../temp/yys_bg.jpg") top center no-repeat;
}
/*整个框架*/
.pic3DBox{
    width: 1200px;
    height: 700px;
    margin-left: auto;
    margin-right: auto;
    position: relative;   /*相对定位，让图片能转来转去*/
    perspective: 500px;
}
/* 图片部分大小设置 */
.pic3DBox ul li,.pic3DBox ul li a{
    width: 720px;
    height: 520px;
    overflow: hidden;
}
.pic3DBox ul li a{
    display: block;
}
}
/* 每张图片都绝对定位 */
.pic3DBox ul li{
    position: absolute;
    z-index: 1;
    transform: scale(0.5,0.5);   /* 没有类的图片，都在current的后面，比较小的状态 */
    top:50%;
    margin-top: -260px;    /* 图片位置控制好 */
    left:50%;
    margin-left: -360px;
    transition:all 0.5s;   /* 过渡属性，动画就靠它了 */
}
 
 /* 当前图片，大小位置控制好 */
.pic3DBox ul li.current{   
    left:50%;
    margin-left: -360px;
    transform:scale(1,1);
    z-index: 100;
}
 
 /* 上一张 */
.pic3DBox ul li.prev{
    left:0;
    margin-left:-72px;
    transform:scale(0.5,0.5)  rotateY(10deg);
    z-index: 50;
}
 
 /* 下一张 */
.pic3DBox ul li.next{
    left:624px;
    margin-left:-72px;
    transform:scale(0.5,0.5)  rotateY(-10deg);
    z-index: 50;
}
 
 /* 按钮，及其位置 */
.pic3DBox .prevBtn, .pic3DBox .nextBtn{
    display: block;
    width: 80px;
    height: 84px;
    background: #f30;
    overflow: hidden;
    position: absolute;
    z-index: 200;
    top:50%;
    margin-top: -40px;
    opacity: 0.5;
    transition:all 0.5s;
}
.pic3DBox .prevBtn{
    left:0;
}
.pic3DBox .nextBtn{
    right:0;
}
  
 /* 按钮的hover 效果*/
.pic3DBox .prevBtn:hover ,.pic3DBox .nextBtn:hover{
    opacity: 1;
}

